<template>
  <div class="mod-member">
    <el-button type="success" size="mini" style="margin-left:96.5%;" @click="back()">返回</el-button>
    <div class="coupon-container">
      <div class="coupon-stem">详细信息</div>
      <div class="coupon-content">
        <img :src="dataInfo.couponImg" alt="宣传图">
      </div>
      <div class="coupon-content">
        <div class="coupon-item">
          <div class="item-left">优惠券名:</div>
          <div class="item-right">{{dataInfo.couponName}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">优惠券类型:</div>
          <div class="item-right">
            <template>
              <el-tag v-for="item in couponTypeList"  v-if="dataInfo.couponType === item.value" size="small" type="success" :key="item.value">
               {{ item.key }}
              </el-tag>
            </template>
          </div>
        </div>
        <div class="coupon-item">
          <div class="item-left">优惠券数量:</div>
          <div class="item-right">{{dataInfo.couponNum}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">优惠金额:</div>
          <div class="item-right">{{dataInfo.couponPrice}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">用户等级:</div>
          <div class="item-right">
            <template>
              <el-tag v-for="item in levelList"  v-if="dataInfo.userLevel === item.id" size="small" type="success" :key="item.id">
               {{ item.name }}
              </el-tag>
            </template>
          </div>
        </div>
      </div>
      <div class="coupon-content">
        <div class="coupon-item">
          <div class="item-left">每人限领:</div>
          <div class="item-right">{{dataInfo.couponLimit}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">使用门槛:</div>
          <div class="item-right">{{dataInfo.couponPoint}} ￥</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">开始时间:</div>
          <div class="item-right">{{dataInfo.startTime}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">结束时间:</div>
          <div class="item-right">{{dataInfo.endTime}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">使用范围:</div>
          <div class="item-right">
            <template>
              <el-tag v-for="item in useTypeList"  v-if="dataInfo.useType === item.value" size="small" type="success" :key="item.value">
               {{ item.key }}
              </el-tag>
            </template>
          </div>
        </div>
      </div>
      <div class="coupon-content">
        <div class="coupon-item">
          <div class="item-left">发行数量:</div>
          <div class="item-right">{{dataInfo.publishCount}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">领取数量:</div>
          <div class="item-right">{{dataInfo.receiveCount}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">使用数量:</div>
          <div class="item-right">{{dataInfo.useCount}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">优惠码:</div>
          <div class="item-right">{{dataInfo.couponCode}}</div>
        </div>
        <div class="coupon-item">
          <div class="item-left">发行状态:</div>
          <div class="item-right">
            <template>
              <el-tag v-for="item in publishStatusList"  v-if="dataInfo.publishStatus === item.value" size="small" type="success" :key="item.value">
               {{ item.key }}
              </el-tag>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        id: '',
        dataInfo: {},
        couponTypeList: [],
        useTypeList: [],
        publishStatusList: [],
        levelList: []
      }
    },
    activated () {
      this.getDataList()
      this.getEnums()
      this.id = this.$route.query.couponId
      this.levelList = this.getLevels()
    },
    created () {
      this.id = this.$route.query.couponId
      this.levelList = this.getLevels()
    },
    methods: {
      // 优惠券详情
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl(`/mall-coupon/coupon/info/details/${this.id}`),
          method: 'get'
        }).then(({data}) => {
          if (data.data && data.code === 200) {
            this.dataInfo = data.data
          } else {
            this.$message({
              showClose: true,
              message: data.message,
              type: 'warning',
              center: true
            })
          }
        })
      },
      // 返回
      back () {
        this.$router.push({path: '/coupon-coupon'})
      },
      // 获取全部等级
      getLevels () {
        this.$http({
          url: this.$http.adornUrl('/mall-user/user/level/queryList'),
          method: 'get'
        }).then(({data}) => {
          this.levelList = data.data
        })
      },
      // 获取全部枚举
      getEnums () {
        this.$http({
          url: this.$http.adornUrl('/mall-user/user/tool/getEnums'),
          method: 'get'
        }).then(({data}) => {
          this.couponTypeList = data.data.CouponTypeEnum
          this.useTypeList = data.data.UseTypeEnum
          this.publishStatusList = data.data.PublishStatusEnum
        })
      }
    }
  }
</script>
<style scoped>
.coupon-container{
  background-color: #f0f0f0;
  border-radius: 5px;
  box-shadow: 0 0 5px 5px rgba(228, 227, 227, 0.3);  /* 设置模拟的虚化边框 */
  overflow: hidden;
  margin: 10px auto;
}
.coupon-stem{
  font-size: 25px;
  font-family: 华文行楷;
  color: tomato;
  padding: 10px 10px 0 10px;
}
.coupon-content{
  float: left;
  padding: 10px;
}
.coupon-item{
  width: 360px;
  display: flex;
  margin: 20px 0 20px 10px;
  font-size: 15px;
}
.item-left{
  color: #8a8787;
}
.item-right{
  margin-left: 15px;
  font-weight: bold;
}
img{
  width: 180px;
  height: 180px;
  margin: 15px 30px;
  border: 5px double black;
  overflow: hidden; /* 隐藏超出边界的内容 */
}
</style>